<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<customNavBar1 :title="title"></customNavBar1>
		<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
			style="height: 450rpx;">
			<swiper-item class="swiper-items" v-for="item, index in list1" :key="index">
				<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
			</swiper-item>
		</swiper>
		<view class="concent">
			<view class="one-content">
				<!-- 列表 -->
				<view class="card-list2">
					<view v-for="(item, index) in userList" :key="index" @click="activity(item)">
						<view class="acrd">
							<view class="image">
								<image class="img" :src="item.pic" mode="aspectFill">
								</image>
							</view>
							<view class="texts">
								<view class="text">
									{{ item.title }}
								</view>
								<view class="text1">
									{{ item.createDate }}
								</view>

							</view>
						</view>
					</view>
				</view>
				<nodata v-if="userList.length === 0"></nodata>
			</view>

		</view>



	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index2.vue'
	import customNavBar1 from '@/compoments/uNavBar1'
	// Vue.component('c-nav-bar1', customNavBar1);
	export default {
		components: {
			customNavBar1,
			nodata
		},
		data() {
			return {
				title: '志愿活动',
				title1: '志愿服务',
				h: uni.getSystemInfoSync().windowHeight,
				// mt: uni.getSystemInfoSync().statusBarHeight,

				list1: [{
					path: 'https://i.ringzle.com/file/20240625/6e6f94378a574f3b8c2bb397eae41f4c.png'
				}],

				indexDB: null,
				fromData: {
					// startTime: '',
					// endTime: '',
					limit: 999,
					page: 1
				},
				userList: [],
				dataList: [],

			}
		},
		onLoad() {
			this.getList()
			this.getDict()
		},

		//上拉加载
		// onReachBottom() {
		// 	console.log(this.status, '-----');
		// 	if (this.status != 'noMore') {
		// 		this.status = 'loading'
		// 		this.getData()
		// 	}
		// },
		methods: {
			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					let dataList = res.data.data.find((p) => p.dictType == 'banner_type').dataList;
					dataList.forEach(item => {
						if (item.dictLabel == this.title1) {
							this.getSwiper(item.dictValue)
						}
					})
				})
			},
			// 获取轮播图数据
			getSwiper(type) {
				this.$api.get(`/sys/isappletpic/queryBannerByType/${type}`).then(res => {
					this.list1 = res.data.data.bannerList
				})
			},
			getList() {
				this.$api.get('/api/commvolunteer/page', this.fromData).then(res => {
					this.userList = res.data.data.list
				})
			},
			//上拉加载
			// getData() {
			// 	let that = this
			// 	this.$api.get("/api/commvolunteer/getList", this.fromData).then((res) => {
			// 		if (res.data.code === 0) {
			// 			that.fromData.page++;
			// 			let {
			// 				list,
			// 				total
			// 			} = res.data.data;
			// 			if (that.userList.length + list.length > total || list.length == 0)
			// 				return that.isOver = true;
			// 			that.userList = [...that.userList, ...list];
			// 			console.log('--------', that.userList);
			// 		} else that.$showToast(res.data.msg);
			// 	});
			// },
			// 去详情
			activity(item) {
				uni.navigateTo({
					url: '/pagesService/funActivity/detailsService?id=' + item.id
				})
			},

			// // 选择时间
			// dataTime(item, index) {
			// 	this.indexDB = index
			// 	console.log(item, this.indexDB);
			// 	this.fromData.endTime = item.lastDay
			// 	this.fromData.startTime = item.firstDay
			// 	this.getList()

			// }

		}
	}
</script>

<style lang="less" scoped>
	.page {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.concent {
		box-sizing: border-box;
		padding: 24rpx;

		.one-content {
			box-sizing: border-box;

			.title {
				margin-top: 64rpx;
				margin-bottom: 36rpx;
				font-size: 36rpx;
				color: #1C1E41;
			}

			.card-list {
				display: flex;
				overflow-y: auto;
				padding: 4rpx;

				.acrd {
					margin-right: 20rpx;
					border-radius: 16rpx;
					background-color: #fff;
					box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

					.texts {
						padding: 20rpx;
					}

					.text {
						width: 280rpx;
						/* 设置容器宽度 */
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 显示的行数 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-size: 26rpx;
						color: #1C1E41;
					}

					.text1 {
						font-size: 26rpx;
						color: #FF4141;
					}


					.image {
						width: 100%;
						height: 348rpx;
						border-radius: 16rpx 16rpx 0 0;
					}
				}
			}

			.card-list1 {
				display: flex;
				overflow-y: auto;
				padding: 4rpx;

				.acrd {
					margin-right: 20rpx;
					border-radius: 16rpx;
					background-color: #fff;
					// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
					width: 330rpx;
					height: 148rpx;
					border: 1rpx solid #CCCCCC;

					.texts {
						padding: 20rpx;
					}

					.text {
						font-size: 26rpx;
						display: flex;
						color: #1C1E41;
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 54rpx;
							height: 54rpx;
						}

						.right {
							display: flex;
							align-items: center;
						}
					}


					.text1 {
						font-weight: Bold;
						font-size: 40rpx;
						color: #1C1E41;
					}


					.image {
						width: 314rpx;
						height: 348rpx;
						border-radius: 16rpx;
					}
				}
			}

			.card-list2 {
				// display: flex;
				// overflow-y: auto;
				padding: 4rpx;

				.acrd {
					margin-top: 30rpx;
					display: flex;
					margin-right: 20rpx;
					border-radius: 16rpx;
					// background-color: #fff;
					// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

					.texts {
						padding: 20rpx;
					}

					.text {
						width: 346rpx;
						/* 设置容器宽度 */
						display: -webkit-box;
						-webkit-line-clamp: 2;
						/* 显示的行数 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-size: 30rpx;
						color: #1C1E41;
						font-weight: Bold;
					}

					.text1 {
						font-weight: Regular;
						font-size: 26rpx;
						color: #1C1E41;
					}

					.text2 {
						font-weight: Regular;
						font-size: 26rpx;
						color: #FF4141;
						margin: 6rpx 0;
					}


					.image {
						width: 288rpx;
						height: 210rpx;
						border-radius: 16rpx;

						.img {
							width: 100%;
							border-radius: 16rpx;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.active {
		box-sizing: border-box;
		border: 1rpx solid #E0B181 !important;
		background-color: #FCF8F3 !important;
		color: #CC9967 !important;
		border-radius: 16rpx !important;
	}

	.actives {
		box-sizing: border-box;
		color: #CC9967 !important;
	}
</style>